<template>
  <div>
    <mt-loadmore :top-method="loadTop" ref="loadmore">
      <card
        class="card"
        v-for="(item, index) in data"
        :key="index"
        @click.native="onClickCard(index)"
        :data="item">
      </card>
      <div class="tips" v-if="!data.length">没有消息。</div>
    </mt-loadmore>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import card from '../modules/card';
import fetch from '@/libs/fetch';

export default {
  components:{
    card
  },
  data() {
    return {
      data: []
    }
  },
  mounted(){
    if(this.getNotices.length){
      this.data = this.getNotices;
    }else{
      this.fetchData();
    }
  },
  computed: {
    ...mapGetters([
      'getNotices'
    ])
  },
  methods: {
    onClickCard(data){
      this.$router.push({path: `/modules/noticedetail/${data}`});
    },
    loadTop(){
      this.fetchData((e) => {
        this.$refs.loadmore.onTopLoaded();
      });
    },
    fetchData(cb){
      fetch.post({
        url: '/lookMessage',
        success: (res) => {
          console.log('lookMessage',res);
          this.fmtData(res.data.data || []);
          cb && cb(null);
        },
        error: (e) => {
          console.error(e);
          this.fmtData([]);
          cb && cb(e);
        }
      })
    },
    fmtData(data) {
      let i = 0;
      for(i = 0; i < data.length; i++){
        data[i].isNew = true;
        data[i].level = data[i].jiBie;
      }
      this.data = data;
      // console.log(this.data);
      this.$store.commit('setNotices', this.data);
    }
  }
}
</script>
<style scoped>
.card{
  margin: 10px 0;
}
.tips{
  width: 100%;
  margin: 10px 0;
  text-align: center;
}
</style>
